<template>
	<view>
		<Setps :num='0' :headtitle='tit[0].name' :tit='tit' />

		<view class="card" style='margin-top:150rpx'>
			<view class="bodtitle">
				<p><b>基本信息</b></p>
			</view>
			<u-form labelPosition="left" :model="usermodel" :rules="rules" ref="inform">
				<!-- 申请单号 -->
				<u-form-item labelWidth="150rpx" label="申请单号" prop="userInfo.orderId" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.orderId">
				</u-form-item>
				<!-- 申请人 -->
				<u-form-item labelWidth="150rpx" label="申请人" prop="userInfo.name" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.name">
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<!-- 员工编号 -->
				<u-form-item labelWidth="150rpx" label="员工编号" prop="userInfo.userid" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.userid">
				</u-form-item>
				<!-- 所在科室 -->
				<u-form-item labelWidth="150rpx" label="所在科室" prop="userInfo.section" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.section">
				</u-form-item>
				<p @click='showlong=true' v-if="!showlong"
					style='border-bottom: 1px solid #f1f1f1;  height: 60rpx;line-height:60rpx;margin: 0 auto;text-align: center;'>
					<image style="transform: rotate(90deg);width:30rpx;" src="../../../static/newimg/blackjt.png"
						mode="widthFix"></image>
				</p>

				<!-- 隐藏区域 -->
				<view v-if="showlong">
					<!-- 银行账号 -->
					<u-form-item labelWidth="150rpx" label="银行账号" prop="userInfo.name" borderBottom ref="item1">
						<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.name">
					</u-form-item>
					<!-- 联系电话 -->
					<u-form-item labelWidth="150rpx" label="联系电话" prop="userInfo.name" borderBottom ref="item1">
						<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.name">
					</u-form-item>
					<!-- 出差地域 -->
					<u-form-item required labelWidth="200rpx" label="出差地域" prop="userInfo.address" borderBottom>
						<u-radio-group slot='right' v-model="addressradio" placement="row">
							<u-radio :customStyle="{marginLeft: '60rpx'}" v-for="(item, index) in addresslist"
								:key="index" :label="item.name" :name="item.name" @change="radioChange">
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<!-- 出差类型 -->
					<u-form-item labelWidth="150rpx" label="出差类型" prop="userInfo.classradio" borderBottom>
						<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.name">
					</u-form-item>

				</view>

				<!-- 多行文本 -->
				<view class="textarea">
					<p style='font-size: 30rpx;'>报销说明<label style="color:red">*</label></p>
					<u-form-item labelWidth="150rpx" prop="userInfo.textarea" borderBottom ref="item7">
						<u--textarea maxlength='200' count v-model="usermodel.userInfo.textarea" border='none'
							placeholder="请输入明确化出差事由"></u--textarea>
					</u-form-item>
				</view>
				<!-- 是否上传附件 -->
				<u-form-item required labelWidth="220rpx" label="是否上传附件" prop="userInfo.classradio" borderBottom>
					<view style="width: 100%;display: flex;justify-content: right;">
						<u-switch v-model="usermodel.userInfo.isdefig" size='22'></u-switch>
					</view>
				</u-form-item>
				<!-- 上传附件 -->
				<u-form-item labelWidth="150rpx" prop="userInfo.textarea" borderBottom ref="item7">
					<view style="width: 100%;font-size: 30rpx;">
						<p>附件(0)<label style="color:red">*</label></p>
						<p @click='upfile' style='width: 90%;margin: 30rpx auto;margin-bottom: 30rpx;'>
							<view class="update">
								<p>
									<image src="@/static/newimg/fj.svg"></image>
									<span style='color: #007aff;padding-left: 10rpx;'>上传附件</span>
								</p>
							</view>
							<!-- <u-button type="primary" :plain="true" icon="map" text="上传附件"></u-button> -->
						</p>
					</view>
				</u-form-item>
			</u-form>
		</view>

		<view class="formcard">
			<p class='title_jk'>借款单<span>已上传(0)</span></p>
			<p @click='upfile' style='width: 90%;margin: 0rpx auto;margin-bottom: 30rpx;'>
				<view class="update">
					<p>
						<image src="@/static/newimg/tJ.svg"></image>
						<span style='color: #007aff;padding-left: 10rpx;'>关联借款单</span>
					</p>
				</view>
			</p>
		</view>

		<view class="bottom_setup">
			<view @click="nextfeed" class="bottom_white">
				<u-button class="custom-style" type="primary" text="下一步(行程反馈)"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import Setps from '@/workspaces/tools/setps.vue'
	export default {
		data() {
			return {
				tit: [{
						name: '基本信息'
					},
					{
						name: '行程反馈'
					},
					{
						name: '费用明细'
					},
					{
						name: '确认提交'
					},
				],
				showlong: false, //箭头展开符
				//用户信息
				usermodel: {
					userInfo: {
						orderId: 'MCQS6559555',
						name: '张三一',
						userid: '666',
						section: '新车型推进科',
						address: '',
						textarea: '',
						isdefig: true
					}
				},
				//正则判断
				rules: {
					'userInfo.name': [{
							required: true,
							message: '请填写姓名',
							trigger: ['blur', 'change']
						},
						{
							pattern: /[\u4e00-\u9fa5]/,
							// 正则检验前先将值转为字符串
							// transform(value) {
							// 	return String(value);
							// },
							message: '请填写您的的真实姓名'
						}
					],
				},
				//地域单选
				addresslist: [{
						name: '境内',
						disabled: false
					},
					{
						name: '境外',
						disabled: false
					},
				],
				// 默认选中
				addressradio: '境内',
				imgfile: []
			}
		},
		methods: {
			upfile() {
				console.log(this.imgfile)
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'http://192.168.2.21:7001/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
							}
						});
					}
				});
			},
			nextfeed() {
				this.$refs.inform.validate().then(res => {
					uni.$u.toast('校验通过')
					uni.navigateTo({
						url: './feedback'
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})

			}
		},
		components: {
			Setps
		}
	}
</script>

<style lang="scss" scoped>
	view {
		font-family: pf;
	}

	.bods {
		height: auto;
		background-color: rgb(248, 249, 251);
		width: 100%;
		margin-bottom: 80rpx;
		height: auto;
	}

	.card {
		width: 90%;
		margin: 50rpx auto;
		margin-bottom: 50rpx;
		background-color: white;
		border-radius: 8px;
		font-size: 28rpx;
		box-sizing: border-box;

		.bodtitle {
			height: 100rpx;
			line-height: 100rpx;
			padding-left: 30rpx;
			font-size: 34rpx;
			border-bottom: 1px solid #ececec;
			background-color: white;
		}
	}

	.textarea {
		display: flex;
		flex-direction: column;

		p {
			padding-left: 30rpx;
			margin-top: 20rpx;
			color: #666666;
			font-size: 30rpx;
		}

		.gup {
			margin: 50rpx 0;
			padding-left: 30rpx;
			margin-top: 20rpx;
		}
	}

	.bottom_setup {
		width: 100%;
		height: 160rpx;
		background-color: white;
		margin-top: 20rpx 0;
		padding: 35rpx 0;
		box-sizing: border-box;

		.bottom_white {
			width: 90%;
			margin: 0 auto;
		}

		.custom-style {
			background-color: #007aff;
			height: 90rpx;
		}
	}

	.update {
		width: 100%;
		height: 80rpx;
		border: 1px solid #007aff;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;

		p {
			image {
				width: 40rpx;
				height: 40rpx;
				vertical-align: bottom;
			}
		}
	}

	.title_jk {
		padding: 20rpx 30rpx;
		font-weight: bold;
		font-size: 34rpx;
		span{
			color:#666666;padding-left: 30rpx;font-size: 15rpx;
		}
	}
</style>
